ユーザー登録Facebookチャットボットを作ってみました

こんにちは、中村です。
友人から「Facebookのチャットボットはどんなもんなかね。簡単に作れるのかな。」という相談を受けましたので、作ってみることにしました。

はじめに

今回IT系の転職サービスの仮会員登録をチャット上で行うという想定で作成します。
Facebook APIで取得できない部分をユーザから取得する方針で、"希望職種"・"希望年収"としました。 実際には細かい経歴等も必要ですが、複雑なものについてはあくまで会員登録後入力としています。

全体のストーリーとしては、このようなものです。
1. Facebookでページを開く
2. メッセージを起動しWelcome Messageを送信する。
3. ボットとユーザーが会話する
4. 会員仮登録処理がされる

作ってみる

構成図

今回の仕組みはこのような形になっています。Dialogflowを使ってリクエストを受けてwebhookで送信されるLambdaに渡します。

Dialogflow

Dialogflowを使うには、Googleアカウントが必要です。お持ちのGoogleアカウントでログインするか、新しいアカウントを作成してください。
Create new agentでagentを作成します。Agent nameを入力、DEFAULT LANGUAGEはJapanese - jaを選択しCREATEをクリックで作成されます。

Agentが作成されると、インテントの一覧が表示されます。

今回は、2つのインテント・エンティティを定義します。

エンティティ
1. Entitiesをクリックし、CREATE ENTITYをクリック
2. Enter valueに登録する値を入力

インテント
エンティティの作成が済んだら、次にインテントを作成します。
1. Intentsをクリックし、CREATE INTENTをクリック
2. Intent nameにインテント名を入力
3. Training phrasesにインテントとマッチさせるユーザーの発話例を入力
4. 入力した内容を元にDialogflowが解釈したパラメータが、Action and parametersに表示される。ENTITYで選択されているものが適切でない場合はエンティティ名をクリックして変更する

API Gateway

Dialogflowが解釈したデータをwebhookにて送信する先を作成します。POSTメソッドでLambdaに接続し、Lambda プロキシ統合 は今回は使用しません。

細かい説明はこちらを参考にしてみてください

Lambda

Dialogflowが処理した内容を使い処理をするバックエンドを作成します。 ランタイムは、node.js 8.10で、ロールについてはサンプルでは他サービスとの連携はありません。適当なロールを選択してください。

ソースはgithubで公開しています。

AWSリソースとDialogflowのインテグレーション

Dialogflowに作成したAPI Gatewayを登録します。ダッシュボードからFulfillmentをクリックします。WebhookとInline Editorが表示されるので、webhookをONにしてURLを入力し、SAVEをクリックしてください。

Fulfillmentを設定は完了ですが、インテントごとにFulfillmentを利用するかどうかを設定されています。各インテントを開きFulfillmentタブを開いてEnable webhook call for this intentをONにしましょう。

これでリクエストがAWSリソースに送信されます。

次にContextsを設定します。追加することで会話の文脈を判断することができます。 Contextsがリクエストにない場合は、インテントに認識されなくなります。会話の流れを構築するときに使用できます。 今回は、インテントそれぞれにoccupation / incomeをContextsに追加します。

FacebookとDialogflowのインテグレーション

facebook for developers にログインし、新しいアプリを追加しましょう。アプリが作成されるとこのような画面になります。製品の追加からMessengerで設定をしていきます。

まずページ作成とトークン生成を行います。案内に沿って新しいページを作成します。

ページを作成後トークン生成で作成したページをプルダウンから選択すると、ページアクセストークンが生成されます。 トークンが生成されたら、DialogflowのダッシュボードからIntegrationsをクリックします。統合できるアプリケーションが表示されるので、Facebook MessengerをONにしましょう。生成されたページアクセストークンを入力し、Verify Tokenにも、任意の文字を入力しSTARTをクリックするとDialogflow側の設定がONになります。

Callback URL / Verify Tokenは、facebook側で設定するのでメモしておいてください

次にfacebook for developersに戻りwebhooksの設定をします。 トークン生成の下にあるWebhookよりコールバックURL、トークンを登録します。サブスクリプションフィールドは、messages・messageing_postbacksにチェックを入れて確認して保存してください。

Messengerのアプリレビューでは、pages_messagingを審査申請に追加します。
入力が完了すると審査提出に必要な項目が表示されます。

項目を入力し、審査提出するとアプリがライブモードになりfacebookページからメッセージの送受信が可能になります。 facebookページの編集でメッセージ送信ボタンを表示する設定にしテストをしてみましょう。

テスト

まとめ

いかがでしたでしょうか。
実際のシステムでは、会員管理DBへの連携・メール送信などの機能追加をする必要がありますが基本形はこのような形で進められるのではと思います。 一部連携も含めて長くなってしまいましたが、参考になれば幸いです。